<template>
  <div class="app-container">
    <h1 v-color>App 根组件</h1>
    <p v-color='color'>测试</p>

    <button @click="color = 'green'">改变color颜色值</button>
    <hr />
    <Article>
      <template #title>
        <p>一首诗</p>
      </template>
      <template #content='{msg}'><!--解构-->
        <div>
          <p>aaaa收款方就是快</p>
          <p>aaaa收款方就是快</p>
          <p>aaaa收款方就是快</p>
          <p>aaaa收款方就是快</p>
          <p>{{ msg }}</p>
        </div>
      </template>
      <template #author>
        <p>王大锤</p>
      </template>
    </Article>
    <hr>

    <div class="box" style="display: none">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left>
        <template #default>
          <p>left组件的内容区域，声明的p标签</p>
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Article from '@/components/Article.vue'
export default {
  data () {
    return {
      color: 'blue'
    }
  },
  components: {
    Left,
    Article,
  },
  //私有自定义指令节点
  directives: {
    color: {
      bind (el, binding) {
        //el表示当前指令所绑定到的DOM 对象
        el.style.color = binding.value
      },
      update (el, binding) {
        el.style.color = binding.value
      }
    }
  },
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
